<template>
  <div class="waste-category" :style="{ backgroundColor: bgColor }">
    <!-- Content will be added here later -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const bgColor = ref('blue');

onMounted(() => {
  if (route.query.backgroundColor) {
    bgColor.value = route.query.backgroundColor;
  }
});
</script>

<style scoped>
.waste-category {
	height: 100px;
  padding: 20px;
  color: white;
}
</style>